<template>
  <div>
    <van-row type="flex" justify="center">
      <van-image
              cover
        :src="shuitou"
        style="margin:10px 0px;"
      />
    </van-row>
    <van-cell-group>
      <van-field
        v-model="username"
        required
        clearable
        label="姓名"
        placeholder="请输入姓名"
      />
      <van-field
        v-model="department"
        required
        clearable
        label="单位名称"
        placeholder="请输入单位名称"
      />
      <van-field
        v-model="mobile"
        required
        clearable
        label="手机号码"
        placeholder="请输入手机号码"
      />
      <van-field
        v-model="card"
        required
        clearable
        label="工作证号"
        placeholder="请输入工作证号"
      />

    </van-cell-group>
    <van-button type="primary" size="large" @click="handleLogin">登录</van-button>
  </div>
</template>

<script>
// components
import { Cell, CellGroup, Field, Image } from "vant";

export default {
  props: {},
  data() {
    return {
      username: null,
      department: null,
      mobile: null,
      card: null,
      shuitou:require('../assets/activity.jpg'),
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // handleLogin(){
    //   this.$router.push('/')
    // }
    async handleLogin() {
      try {
        let data = {
          username: this.username,
          department: this.department,
          mobile: this.mobile,
          card: this.card
        };
        if(this.username == ''){
          this.$toast("请输入姓名");
          return
        }else if(this.department == '') {
          this.$toast("请输入单位名称");
          return
        }else if(this.mobile == '') {
          this.$toast("请输入手机号码");
          return
        }else if(this.card == ''){
          this.$toast("请输入工作证号");
          return
        }
        await this.$store.dispatch("user/login", data);
        let self = this;
        this.$toast({
          message: "登录成功",
          position: "middle",
          duration: 1500,
          onClose() {
            self.$router.replace('/')
          }
        });
      } catch (error) {
        this.$toast(error.message);
      }
    }
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Image.name]: Image
  }
};
</script>

<style scoped lang="scss">
.page {
  padding: 10px 15px;
}
</style>
